<template>
	<div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="850px"
	  class="custom-dialog"
	  @close="resetForm"
	>
	
	  <el-table :data="tableData" style="width: 100%">
		<el-table-column prop="type" label="功能">
			 <template #default="scope">
				 <span v-if="scope.row.type=='method'">方法</span>
				 <span v-if="scope.row.type=='event'">事件</span>
			 </template>
		</el-table-column>
		<el-table-column prop="name" label="名称" />
		<el-table-column prop="identifier" label="标识" />
		<el-table-column fixed="right" align="center" label="操作">
			<template #header>
				<el-button v-hasPerm="['admin:add']" type="primary" @click.stop="editFun.openDialog(null)" plain link :icon="Plus">定义功能</el-button>
			</template>
			<template #default="scope">
				<el-tooltip
				  class="box-item"
				  effect="dark"
				  content="编辑"
				  placement="top"
				>
					<el-button
					  type="primary"
					  link
					  size="small"
					>
					  <i-ep-edit />
					</el-button>
				</el-tooltip>
				
				
				<el-tooltip
				  class="box-item"
				  effect="dark"
				  content="删除"
				  placement="top"
				>
					<el-button
					  type="primary"
					  link
					  size="small"
					  ><i-ep-delete />
					</el-button>
				</el-tooltip>
				
				
			</template>
		</el-table-column>
	  </el-table>
	</el-dialog>
	
	<EditFun ref="editFun"></EditFun>
	
</div>
</template>

<script lang="ts" setup>
	
	import { listForProductFun} from "@/api/product";
	import {ref,defineEmits } from 'vue'
	import { Plus } from '@element-plus/icons-vue'
	import EditFun from "./fun/EditFun.vue";

	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const editFun=ref();
	const tableData=ref([]);
	
	const load=()=>{
		loading.value=true;
		listForProductFun({
			productId:product?product.value.id:'99',
		})
		.then((res) => {
			
			console.log(res.result)
			
			tableData.value=res.result
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	 
	const product=ref(); 
	  
	const openDialog=(row:object)=>{
		dialog.value.visible=true;
		dialog.value.title='功能列表';
		product.value=row;
		load();
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',product.value)
		product.value=null;
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
	
</script>

<style scoped>
	
	/deep/.avatar-uploader .el-upload {
	  border: 1px dashed #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 7.5rem;
	  height: 7.5rem;
	  
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
	
	.form-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-right: 0.625rem;;
	}
	
</style>